<template>
  <div>
    TableDemo01
    <DynamicTable
      ref="DynamicTable"
      :data="tableData"
      :table-config="tableConfig2"
    >
      <template #slot1_default="{item, props}">
        {{props.row[item.prop]}} + 5555
      </template>
    </DynamicTable>
    <el-pagination
      :total="600"
      :page-size="10"
      :current-page.sync="currentPage4"
    ></el-pagination>
  </div>
</template>

<script>
import DynamicTable from "@localModules/ZhiXinLib/element-components/dynamic-table";
import {TableConfig} from "@localModules/ZhiXinLib/element-components/dynamic-table/TableType";
import ShowTooltip from "@localModules/ZhiXinLib/directive/VshowTooltip/VshowTooltip";
import {strCopyCount} from "@localModules/ZhiXinLib/utils";
import {ClickCopy} from "@localModules/ZhiXinLib/directive/ClickCopy/index";

export default {
  name: "TableDemo01",
  components:{
    DynamicTable
  },
  directives:{
    ShowTooltip,
    ClickCopy
  },
  data(){
    return {
      currentPage4: 10,
      tableConfig2: new TableConfig({}, [
        {
          label: 'dd',
          align: 'center',
          minWidth: '56',
          prop: 'genProp0',
        },
        {
          label: 'dd',
          align: 'center',
          minWidth: '56',
          prop: 'genProp1',
          slotName: 'slot1'
        },
        {
          label: 'zs',
          align: 'center',
          children: [
            {
              label: 'tz',
              align: 'center',
              minWidth: '116',
              prop: 'genProp2',
            },
            {
              label: 'nd',
              align: 'center',
              minWidth: '152',
              prop: 'genProp3',
              typeSlots:(h, item)=> {
                return {
                  default: (props)=>{
                    return [
                      this.$createElement('el-tag',{
                        staticClass: ['test'],
                        directives:[ // 渲染函数
                          {
                            name: 'showTooltip',
                            value: props.row[item.prop]
                          },
                          {
                            name: 'ClickCopy',
                            value: props.row[item.prop]
                          }
                        ],
                      },[props.row[item.prop]])
                    ];
                  }
                }
              },
            },
          ],
        },
      ]),
    }
  },
  computed:{
    tableData(){
      const data = [
      ]
      for (let i = 0; i < 10; i++) {
        data.push({
          genProp0: '66' + this.currentPage4,
          genProp1: '66' + this.currentPage4,
          genProp2: '7383.38' + this.currentPage4,
          genProp3: strCopyCount('1119.59',this.currentPage4) + this.currentPage4,
        })
      }
      return data
    }
  }
}
</script>

<style scoped lang="scss">
.test{
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
